<template>
  <div ref="containerRef" class="detail">
    <div class="detail_header">
      <a-affix :target="(containerRef as HTMLElement)">
        <a-page-header title="处理代办" subtitle="处理" @back="onBack">
        </a-page-header>
      </a-affix>
    </div>
    <div class="detail_content">
      <h1 class="title">{{ dataDetail?.title }}</h1>
      <div class="info">
        <a-space>
          <span>
            <icon-user class="icon"/>
            <span class="label">代办创建人：</span>
            <span>{{ dataDetail?.createUserString }}</span>
          </span>
          <a-divider direction="vertical"/>
          <span>
            <icon-history class="icon"/>
            <span class="label">提交时间：</span>
            <span>{{ dataDetail?.remindTime }}</span>
          </span>
          <a-divider v-if="dataDetail?.updateTime" direction="vertical"/>
          <span v-if="dataDetail?.updateTime">
            <icon-schedule class="icon"/>
            <span>更新时间：</span>
            <span>{{ dataDetail?.updateTime }}</span>
          </span>
          <span>
            <icon-schedule class="icon"/>
            <span>待办状态：</span>
            <!--  设置颜色-->
            <span v-if="dataDetail?.status === 1" class="status status-todo">待处理</span>
            <span v-if="dataDetail?.status === 2" class="status status-doing">进行中</span>
            <span v-if="dataDetail?.status === 3" class="status status-done">已完成</span>
          </span>
        </a-space>
      </div>
      <div style="flex: 1;">
        <AiEditor v-model="content"/>
        <!--      按钮-->
        <!--      1.根据类型显示不同的按钮 - 按钮剧中显示-->
        <div class="detail_footer" v-if="dataDetail?.status === 1 || dataDetail?.status === 2">
          <a-space>
            <!--个人待办-->
            <a-button type="primary" v-if="dataDetail?.type === '1'">完成</a-button>
            <a-button type="default" v-if="dataDetail?.type === '1'">取消</a-button>
          </a-space>
          <a-space>
            <!--团队待办-->
            <a-button type="primary" v-if="dataDetail?.type === '2'">完成</a-button>
            <a-button type="default" v-if="dataDetail?.type === '2'">取消</a-button>
          </a-space>
          <a-space>
            <!--申请待办-->
            <a-button type="primary" v-if="dataDetail?.type === '3'">同意</a-button>
            <a-button type="default" v-if="dataDetail?.type === '3'">拒绝</a-button>
          </a-space>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {type TodoPreviewResp, getTodo} from '@/apis/system/todo'
import {useTabsStore} from '@/stores'
import AiEditor from './components/index.vue'

const route = useRoute()
const router = useRouter()
const tabsStore = useTabsStore()

const {id} = route.query
const containerRef = ref<HTMLElement | null>()
const dataDetail = ref<TodoPreviewResp>()
const content = computed(() => dataDetail.value?.content)

// 回退
const onBack = () => {
  router.back()
  tabsStore.closeCurrent(route.path)
}

// 打开
const onOpen = async (id: string) => {
  const {data} = await getTodo(id)
  dataDetail.value = data
}

onMounted(() => {
  onOpen(id as string)
})
</script>

<style scoped lang="scss">
.detail_content {
  .title {
    text-align: center;
  }

  .info {
    text-align: center;
  }

  .icon {
    margin-right: 3px;
  }
}

.status {
  font-weight: bold;
  margin-left: 4px;

  &-todo {
    color: #faad14; // 橙色
  }

  &-doing {
    color: #1890ff; // 蓝色
  }

  &-done {
    color: #52c41a; // 绿色
  }
}

.detail_footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px; // 可根据需要调整
}
</style>
